<template>
  <div class="headd">
    <div class="box">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="公告内容:" class="liu">
          <el-input
            v-model="formInline.user"
            placeholder="请输入公告内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select
            v-model="formInline.region"
            placeholder="请选择状态"
            class="liu"
          >
            <el-option label="撤销" :value="0"></el-option>
            <el-option label="公布" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否置顶:">
          <el-select
            v-model="formInline.region1"
            placeholder="请选择是否置顶"
            class="liu"
          >
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="button">
            <el-button type="primary" icon="el-icon-search" @click="fun(formInline.user,formInline.region,formInline.region1)">搜索</el-button>
            <el-button icon="el-icon-delete" @click="ghg">清空</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="iconn">
      <el-button type="primary" icon="el-icon-plus" class="new" @click="ert">新增</el-button>
      <div class="iconn1">
        <el-button class="rol" icon="el-icon-refresh"></el-button>
        <el-button class="rol" icon="el-icon-search"></el-button>
      </div>
    </div>
    <div class="centt">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="50" type="index">
           
          </el-table-column>
          <el-table-column label="公告内容" width="374">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="372">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.text }}</el-tag>
                </div>
            </template>
          </el-table-column>
          <el-table-column label="是否置顶" width="372">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.text1 }}</el-tag>
                </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <Tinymce :height="200" :with="425" v-model="value"></Tinymce>
        </div>
      </template>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40,50,100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog title="新增" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="公告标题">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="公告标题" >
      <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
    </el-form-item>
    <el-form-item label="公告标题" >
      <el-radio v-model="radio1" label="1">备选项</el-radio>
  <el-radio v-model="radio1" label="2">备选项</el-radio>
    </el-form-item>
    <el-form-item label="公告标题">
      <Tinymce :height="200" :with="425" v-model="value"></Tinymce>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>
    </div>
  </div>
</template>
    </div>
  </div>
</template>

<script>
import Tinymce from "../../common/Tinymce.vue"; 
export default {
  components: {
    Tinymce,
  },
  data() {
    return {
        radio: '1',
        radio1: '1',
      dialogFormVisible:false,
      value:'',
      page:10,
      as:1,
      total:0,
      tableData:[],
      formInline: {
        user: "",
        region: "",
        region1: "",
      },
      form:{
        
      }
    };
  },
  created(){
    this.list()
  },
  methods: {
    list(){
      this.$http.get('http://admin.yami.byesame.com/apis/shop/notice/page',{
        params:{
          t: this.timestamp,
          current:this.as,
          size:this.page
        }
      }).then((res)=>{
        const item=res.data.records
        for(let i =0;i<item.length;i++){
          if(item[i].status==1){
            item[i].text='公布'
          }else{
              item[i].text='撤销'
          }
          if(item[i].isTop==1){
             item[i].text1='是'
          }else{
             item[i].text1='否'
          }
        }
        console.log(res)
        this.total = res.data.total;
        this.tableData = res.data.records;
      })
    },
    ert(){
      this.dialogFormVisible=true
    },
    fun(a,b,c){
      this.$http.get('http://admin.yami.byesame.com/apis/shop/notice/page',{
        params:{
          t: this.timestamp,
          current:this.as,
          size:this.page,
          title:a,
          status:b,
          isTop:c
        }
      }).then((res)=>{
        const item=res.data.records
        for(let i =0;i<item.length;i++){
          if(item[i].status==1){
            item[i].text='公布'
          }else{
              item[i].text='撤销'
          }
          if(item[i].isTop==1){
             item[i].text1='是'
          }else{
             item[i].text1='否'
          }
        }
        console.log(res)
        this.total = res.data.total;
        this.tableData = res.data.records;
      })
    },
    ghg(){
      this.formInline.user=''
      this.formInline.region=''
      this.formInline.region1=''
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page=val
      this.list()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.as=val
      this.list()
    },
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style scoped>
>>> .liu .el-input__inner {
  flex: 25%;
  width: 257px;
  height: 32px;
}
.liu {
  margin-left: 20px;
  flex: 25%;
}
.yang {
  flex: 25%;
}
.box {
  width: 100%;
  display: flex;
  text-align: center;
}
>>> .el-button--primary {
  padding: 6px 15px;
}
>>> .el-button--default {
  padding: 6px 15px;
}
.button {
  width: 200px;
  margin-left: 30%;
  flex: 50%;
}
.rol {
  padding: 8px;
  border-radius: 50%;
}
.iconn {
  width: 100%;
  margin-bottom: 10px;
  margin-right: 5px;
}
>>> .cell {
  font-size: 12px;
  text-align: center;
  color: black;
}
>>> .el-table th {
  background-color: #fafafa;
}
.iconn1 {
  float: right;
}
.new {
  float: left;
  padding: 9px 15px;
  margin-bottom: 5px;
}
.site-wrapper .el-pagination {
  padding: 20px;
}
.group{
  float: left;
}
</style>